import { Breadcrumb } from "antd";
import FontIcon from "@/components/public/fontIcon/Index";
import { useEffect, useState } from "react";
import styles from "./Index.module.less";
import { useLocation, useNavigate } from "react-router-dom";
import { getMatches } from "@/router";

export default function Index() {
  const navigate = useNavigate();
  const [breadcrumbItems, setBreadcrumbItems] = useState<any>([
    {
      title: (
        <span className={styles.items}>
          <FontIcon name="icon-head" size="18px" />
        </span>
      ),
      href: "/home",
      onClick: () => {
        navigate("/home");
      },
    },
  ]);
  const location = useLocation();
  useEffect(() => {
    const routeInfo = getMatches(location.pathname);
    routeInfo?.splice(0, 2);
    const items = routeInfo
      ?.filter((item) => item.pathname != "/home")
      ?.map((item, index) => {
        if (index === routeInfo.length - 1) {
          return {
            title: (
              <span className={`${styles.active} ${styles.items}`}>{item.route?.handle?.meta?.title}</span>
            ),
            onClick: () => {
              navigate(item.pathname);
            },
          };
        } else {
          return {
            title: <span className={styles.items}>{item.route?.handle?.meta?.title}</span>,
            onClick: () => {
              navigate(item.pathname);
            },
          };
        }
      });
    if (items) {
      setBreadcrumbItems([
        {
          title: (
            <span className={styles.items}>
              <FontIcon name="icon-head" size="18px" />
            </span>
          ),
          onClick: () => {
            navigate("/home");
          },
        },
        ...items,
      ]);
    }
  }, [location.pathname]);
  return <Breadcrumb items={breadcrumbItems} />;
}
